<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - UI原型</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f0f2f5;
                padding: 20px;
            }
            .prototype-container {
                max-width: 1200px;
                margin: 0 auto;
            }
            .header {
                background-color: #ff9fb5;
                color: white;
                padding: 16px 24px;
                border-radius: 12px;
                margin-bottom: 24px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            /* 分类容器样式 */
            .category-section {
                margin-bottom: 40px;
            }
            .category-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 16px;
                padding: 0 8px;
            }
            .category-title {
                font-size: 20px;
                font-weight: 600;
                color: #333;
                display: flex;
                align-items: center;
            }
            .category-title i {
                margin-right: 10px;
                color: #ff9fb5;
            }
            .pages-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
                gap: 24px;
                margin-bottom: 40px;
            }
            /* 水平滚动容器 */
            .pages-scroll {
                display: flex;
                overflow-x: auto;
                gap: 24px;
                padding: 8px 4px 24px;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                scrollbar-color: #ff9fb5 #f0f2f5;
            }
            .pages-scroll::-webkit-scrollbar {
                height: 8px;
            }
            .pages-scroll::-webkit-scrollbar-track {
                background: #f0f2f5;
                border-radius: 4px;
            }
            .pages-scroll::-webkit-scrollbar-thumb {
                background-color: #ffd6e0;
                border-radius: 4px;
            }
            .pages-scroll::-webkit-scrollbar-thumb:hover {
                background-color: #ff9fb5;
            }
            .page-container {
                background-color: white;
                border-radius: 16px;
                overflow: hidden;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                min-width: 410px;
                flex-shrink: 0;
            }
            .page-header {
                background-color: #ffd6e0;
                color: #333;
                padding: 12px 16px;
                font-weight: 500;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .device-iframe {
                width: 390px;
                height: 844px;
                border: none;
                margin: 0 auto;
                display: block;
            }
            .device-container {
                background-color: #e2e2e2;
                border-radius: 40px;
                padding: 10px;
                width: 410px;
                margin: 16px auto;
                position: relative;
            }
            .device-container::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 150px;
                height: 30px;
                background-color: #111;
                border-radius: 0 0 16px 16px;
                z-index: 10;
            }
            .device-notch {
                position: absolute;
                top: 10px;
                left: 50%;
                transform: translateX(-50%);
                width: 120px;
                height: 25px;
                background-color: #111;
                border-radius: 20px;
                z-index: 20;
            }
            .nav-buttons {
                display: flex;
                gap: 8px;
                margin-top: 12px;
                padding: 0 16px;
            }
            .nav-button {
                background-color: #f5f5f5;
                color: #666;
                border: none;
                padding: 8px 12px;
                border-radius: 6px;
                font-size: 12px;
                cursor: pointer;
                transition: all 0.2s;
            }
            .nav-button:hover {
                background-color: #ffd6e0;
                color: #333;
            }
            .nav-button.active {
                background-color: #ff9fb5;
                color: white;
            }
            /* 滚动控制按钮 */
            .scroll-controls {
                display: flex;
                gap: 8px;
            }
            .scroll-btn {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background-color: #fff;
                color: #ff9fb5;
                border: 2px solid #ffd6e0;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                transition: all 0.2s;
            }
            .scroll-btn:hover {
                background-color: #ff9fb5;
                color: white;
            }
            /* 分类标签 */
            .category-tags {
                display: flex;
                gap: 12px;
                margin-bottom: 20px;
                overflow-x: auto;
                padding: 4px;
                scrollbar-width: none;
            }
            .category-tags::-webkit-scrollbar {
                display: none;
            }
            .category-tag {
                background-color: #fff;
                color: #666;
                padding: 8px 16px;
                border-radius: 20px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                white-space: nowrap;
                transition: all 0.2s;
                border: 1px solid #eee;
            }
            .category-tag.active {
                background-color: #ff9fb5;
                color: white;
                border-color: #ff9fb5;
            }
            .category-tag:hover {
                background-color: #ffd6e0;
                color: #333;
            }
        </style>
    </head>
    <body>
        <div class="prototype-container">
            <div class="header">
                <h1 class="text-2xl font-bold">孕育宝典小程序 - UI原型</h1>
                <p class="mt-2 text-white opacity-90">基于UI设计规范的高保真原型</p>
            </div>

            <!-- 分类标签导航 -->
            <div class="category-tags">
                <div class="category-tag active" data-category="all">全部页面</div>
                <div class="category-tag" data-category="basic">基础应用</div>
                <div class="category-tag" data-category="period">经期与备孕</div>
                <div class="category-tag" data-category="pregnancy">孕期管理</div>
                <div class="category-tag" data-category="postpartum">产后恢复</div>
                <div class="category-tag" data-category="diet">健康饮食</div>
                <div class="category-tag" data-category="knowledge">知识教育</div>
                <div class="category-tag" data-category="community">伴侣社区</div>
                <div class="category-tag" data-category="setup" style="background-color: #ff9fb5; color: white">
                    设置引导
                </div>
            </div>

            <!-- 保留原来的pages-grid，但添加全部页面的类标识符 -->
            <div class="pages-grid" id="all-pages">
                <!-- 页面内容将在下一步添加 -->
            </div>

            <!-- 设置引导页面分类 -->
            <div class="category-section" id="setup-section">
                <div class="category-header">
                    <div class="category-title">
                        <i class="fas fa-magic"></i>
                        <span>初次设置引导</span>
                    </div>
                </div>
                <div class="pages-scroll" id="setup-pages">
                    <!-- 初次设置引导页面 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>初次设置引导 (Setup Guide)</span>
                            <span class="text-xs">setup_guide.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="setup_guide.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button active">初次设置</button>
                            <button class="nav-button" onclick="navigateTo('unified_home.html', this)">
                                进入统一首页
                            </button>
                        </div>
                    </div>

                    <!-- 统一首页 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>统一首页 (Unified Home)</span>
                            <span class="text-xs">unified_home.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="unified_home.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('setup_guide.html', this)">设置引导</button>
                            <button class="nav-button active" onclick="navigateTo('unified_home.html', this)">
                                统一首页
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 基础应用分类 -->
            <div class="category-section" id="basic-section">
                <div class="category-header">
                    <div class="category-title">
                        <i class="fas fa-mobile-alt"></i>
                        <span>基础应用</span>
                    </div>
                    <div class="scroll-controls">
                        <div class="scroll-btn scroll-left" data-target="basic-pages">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="scroll-btn scroll-right" data-target="basic-pages">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
                <div class="pages-scroll" id="basic-pages">
                    <!-- 首页 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>首页 (Home)</span>
                            <span class="text-xs">home.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="home.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button active" onclick="navigateTo('home.html', this)">首页</button>
                            <button class="nav-button" onclick="navigateTo('period_calendar.html', this)">
                                经期日历
                            </button>
                            <button class="nav-button" onclick="navigateTo('knowledge_list.html', this)">知识库</button>
                        </div>
                    </div>

                    <!-- 用户个人资料 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>用户个人资料 (User Profile)</span>
                            <span class="text-xs">user_profile.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="user_profile.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('home.html', this)">首页</button>
                            <button class="nav-button active" onclick="navigateTo('user_profile.html', this)">
                                个人资料
                            </button>
                            <button class="nav-button" onclick="navigateTo('settings.html', this)">设置</button>
                        </div>
                    </div>

                    <!-- 设置页面 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>设置 (Settings)</span>
                            <span class="text-xs">settings.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="settings.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('user_profile.html', this)">个人资料</button>
                            <button class="nav-button active" onclick="navigateTo('settings.html', this)">设置</button>
                            <button class="nav-button" onclick="navigateTo('home.html', this)">首页</button>
                        </div>
                    </div>

                    <!-- 健康记录 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>健康记录 (Health Record)</span>
                            <span class="text-xs">health_record.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="health_record.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('home.html', this)">首页</button>
                            <button class="nav-button active" onclick="navigateTo('health_record.html', this)">
                                健康记录
                            </button>
                            <button class="nav-button" onclick="navigateTo('period_calendar.html', this)">
                                经期日历
                            </button>
                        </div>
                    </div>

                    <!-- 我的收藏 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>我的收藏 (My Favorites)</span>
                            <span class="text-xs">my_favorites.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="my_favorites.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('user_profile.html', this)">个人资料</button>
                            <button class="nav-button active" onclick="navigateTo('my_favorites.html', this)">
                                我的收藏
                            </button>
                            <button class="nav-button" onclick="navigateTo('knowledge_list.html', this)">知识库</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 经期与备孕相关分类 -->
            <div class="category-section" id="period-section">
                <div class="category-header">
                    <div class="category-title">
                        <i class="fas fa-calendar-alt"></i>
                        <span>经期与备孕</span>
                    </div>
                    <div class="scroll-controls">
                        <div class="scroll-btn scroll-left" data-target="period-pages">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="scroll-btn scroll-right" data-target="period-pages">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
                <div class="pages-scroll" id="period-pages">
                    <!-- 经期日历 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>经期日历 (Period Calendar)</span>
                            <span class="text-xs">period_calendar.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="period_calendar.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('home.html', this)">首页</button>
                            <button class="nav-button active" onclick="navigateTo('period_calendar.html', this)">
                                经期日历
                            </button>
                            <button class="nav-button" onclick="navigateTo('period_record.html', this)">
                                添加记录
                            </button>
                        </div>
                    </div>

                    <!-- 经期记录表单 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>经期记录 (Period Record)</span>
                            <span class="text-xs">period_record.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="period_record.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('period_calendar.html', this)">
                                返回日历
                            </button>
                            <button class="nav-button active" onclick="navigateTo('period_record.html', this)">
                                经期记录
                            </button>
                        </div>
                    </div>

                    <!-- 排卵预测 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>排卵预测 (Ovulation)</span>
                            <span class="text-xs">ovulation.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="ovulation.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('period_calendar.html', this)">
                                经期日历
                            </button>
                            <button class="nav-button active" onclick="navigateTo('ovulation.html', this)">
                                排卵预测
                            </button>
                        </div>
                    </div>

                    <!-- 经期数据统计 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>经期数据统计 (Period Statistics)</span>
                            <span class="text-xs">period_statistics.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="period_statistics.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('period_calendar.html', this)">
                                经期日历
                            </button>
                            <button class="nav-button active" onclick="navigateTo('period_statistics.html', this)">
                                经期统计
                            </button>
                            <button class="nav-button" onclick="navigateTo('ovulation.html', this)">排卵预测</button>
                        </div>
                    </div>

                    <!-- 饮食习惯调查 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>饮食习惯调查 (Diet Survey)</span>
                            <span class="text-xs">diet_survey.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="diet_survey.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('user_profile.html', this)">个人资料</button>
                            <button class="nav-button active" onclick="navigateTo('diet_survey.html', this)">
                                饮食习惯调查
                            </button>
                            <button class="nav-button" onclick="navigateTo('health_survey.html', this)">
                                健康状况调查
                            </button>
                        </div>
                    </div>

                    <!-- 健康状况调查 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>健康状况调查 (Health Survey)</span>
                            <span class="text-xs">health_survey.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="health_survey.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('diet_survey.html', this)">
                                饮食习惯调查
                            </button>
                            <button class="nav-button active" onclick="navigateTo('health_survey.html', this)">
                                健康状况调查
                            </button>
                            <button class="nav-button" onclick="navigateTo('user_profile.html', this)">个人资料</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 孕期管理相关分类 -->
            <div class="category-section" id="pregnancy-section">
                <div class="category-header">
                    <div class="category-title">
                        <i class="fas fa-baby"></i>
                        <span>孕期管理</span>
                    </div>
                    <div class="scroll-controls">
                        <div class="scroll-btn scroll-left" data-target="pregnancy-pages">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="scroll-btn scroll-right" data-target="pregnancy-pages">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
                <div class="pages-scroll" id="pregnancy-pages">
                    <!-- 孕期主页 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>孕期主页 (Pregnancy Home)</span>
                            <span class="text-xs">pregnancy_home.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="pregnancy_home.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('home.html', this)">备孕首页</button>
                            <button class="nav-button active" onclick="navigateTo('pregnancy_home.html', this)">
                                孕期主页
                            </button>
                            <button class="nav-button" onclick="navigateTo('prenatal_checkup.html', this)">
                                产检管理
                            </button>
                        </div>
                    </div>

                    <!-- 产检管理 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>产检管理 (Prenatal Checkup)</span>
                            <span class="text-xs">prenatal_checkup.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="prenatal_checkup.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('pregnancy_home.html', this)">
                                孕期主页
                            </button>
                            <button class="nav-button active" onclick="navigateTo('prenatal_checkup.html', this)">
                                产检管理
                            </button>
                        </div>
                    </div>

                    <!-- 胎动记录 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>胎动记录 (Fetal Movement)</span>
                            <span class="text-xs">fetal_movement.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="fetal_movement.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('pregnancy_home.html', this)">
                                孕期主页
                            </button>
                            <button class="nav-button active" onclick="navigateTo('fetal_movement.html', this)">
                                胎动记录
                            </button>
                            <button class="nav-button" onclick="navigateTo('prenatal_checkup.html', this)">
                                产检管理
                            </button>
                        </div>
                    </div>

                    <!-- 胎儿成长 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>胎儿成长 (Fetal Growth)</span>
                            <span class="text-xs">fetal_growth.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="fetal_growth.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('pregnancy_home.html', this)">
                                孕期主页
                            </button>
                            <button class="nav-button active" onclick="navigateTo('fetal_growth.html', this)">
                                胎儿成长
                            </button>
                            <button class="nav-button" onclick="navigateTo('fetal_movement.html', this)">
                                胎动记录
                            </button>
                        </div>
                    </div>

                    <!-- 体重管理 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>体重管理 (Weight Management)</span>
                            <span class="text-xs">weight_management.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="weight_management.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('pregnancy_home.html', this)">
                                孕期主页
                            </button>
                            <button class="nav-button active" onclick="navigateTo('weight_management.html', this)">
                                体重管理
                            </button>
                            <button class="nav-button" onclick="navigateTo('nutrition_tracking.html', this)">
                                营养追踪
                            </button>
                        </div>
                    </div>

                    <!-- 待产包准备 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>待产包准备 (Hospital Bag)</span>
                            <span class="text-xs">hospital_bag.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="hospital_bag.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('pregnancy_home.html', this)">
                                孕期主页
                            </button>
                            <button class="nav-button active" onclick="navigateTo('hospital_bag.html', this)">
                                待产包准备
                            </button>
                            <button class="nav-button" onclick="navigateTo('prenatal_checkup.html', this)">
                                产检管理
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 产后恢复相关分类 -->
            <div class="category-section" id="postpartum-section">
                <div class="category-header">
                    <div class="category-title">
                        <i class="fas fa-heart"></i>
                        <span>产后恢复</span>
                    </div>
                    <div class="scroll-controls">
                        <div class="scroll-btn scroll-left" data-target="postpartum-pages">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="scroll-btn scroll-right" data-target="postpartum-pages">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
                <div class="pages-scroll" id="postpartum-pages">
                    <!-- 产后记录 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>产后记录 (Postpartum Record)</span>
                            <span class="text-xs">postpartum_record.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="postpartum_record.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('pregnancy_home.html', this)">
                                孕期主页
                            </button>
                            <button class="nav-button active" onclick="navigateTo('postpartum_record.html', this)">
                                产后记录
                            </button>
                            <button class="nav-button" onclick="navigateTo('home.html', this)">首页</button>
                        </div>
                    </div>

                    <!-- 产后恢复计划 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>产后恢复计划 (Recovery Plan)</span>
                            <span class="text-xs">recovery_plan.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="recovery_plan.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('postpartum_record.html', this)">
                                产后记录
                            </button>
                            <button class="nav-button active" onclick="navigateTo('recovery_plan.html', this)">
                                恢复计划
                            </button>
                            <button class="nav-button" onclick="navigateTo('nutrition_tracking.html', this)">
                                营养追踪
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 健康饮食相关分类 -->
            <div class="category-section" id="diet-section">
                <div class="category-header">
                    <div class="category-title">
                        <i class="fas fa-utensils"></i>
                        <span>健康饮食</span>
                    </div>
                    <div class="scroll-controls">
                        <div class="scroll-btn scroll-left" data-target="diet-pages">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="scroll-btn scroll-right" data-target="diet-pages">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
                <div class="pages-scroll" id="diet-pages">
                    <!-- 饮食指南 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>饮食指南 (Food Guide)</span>
                            <span class="text-xs">food_guide.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="food_guide.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('home.html', this)">首页</button>
                            <button class="nav-button active" onclick="navigateTo('food_guide.html', this)">
                                饮食指南
                            </button>
                        </div>
                    </div>

                    <!-- 食谱推荐 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>食谱推荐 (Recipe Recommendations)</span>
                            <span class="text-xs">recipe_recommendations.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="recipe_recommendations.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('food_guide.html', this)">饮食指南</button>
                            <button class="nav-button active" onclick="navigateTo('recipe_recommendations.html', this)">
                                食谱推荐
                            </button>
                            <button class="nav-button" onclick="navigateTo('nutrition_tracking.html', this)">
                                营养追踪
                            </button>
                        </div>
                    </div>

                    <!-- 营养追踪 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>营养追踪 (Nutrition Tracking)</span>
                            <span class="text-xs">nutrition_tracking.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="nutrition_tracking.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('pregnancy_home.html', this)">
                                孕期主页
                            </button>
                            <button class="nav-button active" onclick="navigateTo('nutrition_tracking.html', this)">
                                营养追踪
                            </button>
                            <button class="nav-button" onclick="navigateTo('food_guide.html', this)">饮食指南</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 知识教育相关分类 -->
            <div class="category-section" id="knowledge-section">
                <div class="category-header">
                    <div class="category-title">
                        <i class="fas fa-book-medical"></i>
                        <span>知识教育</span>
                    </div>
                    <div class="scroll-controls">
                        <div class="scroll-btn scroll-left" data-target="knowledge-pages">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="scroll-btn scroll-right" data-target="knowledge-pages">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
                <div class="pages-scroll" id="knowledge-pages">
                    <!-- 知识分类列表 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>知识分类列表 (Knowledge List)</span>
                            <span class="text-xs">knowledge_list.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="knowledge_list.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('home.html', this)">首页</button>
                            <button class="nav-button active" onclick="navigateTo('knowledge_list.html', this)">
                                知识库
                            </button>
                            <button class="nav-button" onclick="navigateTo('knowledge_detail.html', this)">
                                知识详情
                            </button>
                        </div>
                    </div>

                    <!-- 知识详情 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>知识详情 (Knowledge Detail)</span>
                            <span class="text-xs">knowledge_detail.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="knowledge_detail.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('knowledge_list.html', this)">
                                返回列表
                            </button>
                            <button class="nav-button active" onclick="navigateTo('knowledge_detail.html', this)">
                                知识详情
                            </button>
                        </div>
                    </div>

                    <!-- 行为指南 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>行为指南 (Behavior Guide)</span>
                            <span class="text-xs">behavior_guide.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="behavior_guide.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('home.html', this)">首页</button>
                            <button class="nav-button active" onclick="navigateTo('behavior_guide.html', this)">
                                行为指南
                            </button>
                        </div>
                    </div>
                    
                    <!-- 新生儿护理 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>新生儿护理 (Newborn Care)</span>
                            <span class="text-xs">newborn_care.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="newborn_care.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('knowledge_list.html', this)">知识库</button>
                            <button class="nav-button active" onclick="navigateTo('newborn_care.html', this)">
                                新生儿护理
                            </button>
                            <button class="nav-button" onclick="navigateTo('behavior_guide.html', this)">行为指南</button>
                        </div>
                    </div>

                    <!-- 婴儿喂养指南 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>婴儿喂养指南 (Feeding Guide)</span>
                            <span class="text-xs">feeding_guide.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="feeding_guide.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('knowledge_list.html', this)">知识库</button>
                            <button class="nav-button" onclick="navigateTo('newborn_care.html', this)">
                                新生儿护理
                            </button>
                            <button class="nav-button active" onclick="navigateTo('feeding_guide.html', this)">
                                婴儿喂养
                            </button>
                            <button class="nav-button" onclick="navigateTo('behavior_guide.html', this)">行为指南</button>
                        </div>
                    </div>

                    <!-- 婴儿睡眠解决方案 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>婴儿睡眠解决方案 (Sleep Solutions)</span>
                            <span class="text-xs">sleep_solutions.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="sleep_solutions.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('knowledge_list.html', this)">知识库</button>
                            <button class="nav-button" onclick="navigateTo('feeding_guide.html', this)">
                                婴儿喂养
                            </button>
                            <button class="nav-button active" onclick="navigateTo('sleep_solutions.html', this)">
                                睡眠解决方案
                            </button>
                            <button class="nav-button" onclick="navigateTo('newborn_care.html', this)">
                                新生儿护理
                            </button>
                        </div>
                    </div>

                    <!-- 母婴互动指南 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>母婴互动指南 (Mother Interaction)</span>
                            <span class="text-xs">mother_interaction.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="mother_interaction.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('knowledge_list.html', this)">知识库</button>
                            <button class="nav-button" onclick="navigateTo('feeding_guide.html', this)">
                                婴儿喂养
                            </button>
                            <button class="nav-button active" onclick="navigateTo('mother_interaction.html', this)">
                                母婴互动
                            </button>
                            <button class="nav-button" onclick="navigateTo('sleep_solutions.html', this)">
                                睡眠解决方案
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 产后抑郁预警 -->
            <div class="category-section" id="health-section">
                <div class="category-header">
                    <div class="category-title">
                        <i class="fas fa-heartbeat"></i>
                        <span>健康管理</span>
                    </div>
                    <div class="scroll-controls">
                        <div class="scroll-btn scroll-left" data-target="health-pages">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="scroll-btn scroll-right" data-target="health-pages">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="category-tag active" data-target="health-section">全部</div>
                </div>
                <div class="category-pages" id="health-pages">
                    <!-- 产后抑郁预警 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>产后抑郁预警 (Postpartum Depression Warning)</span>
                            <span class="text-xs">depression_warning.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="depression_warning.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('home.html', this)">首页</button>
                            <button class="nav-button active" onclick="navigateTo('depression_warning.html', this)">
                                产后抑郁预警
                            </button>
                            <button class="nav-button" onclick="navigateTo('health_record.html', this)">健康记录</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 伴侣社区相关分类 -->
            <div class="category-section" id="community-section">
                <div class="category-header">
                    <div class="category-title">
                        <i class="fas fa-user-friends"></i>
                        <span>伴侣社区</span>
                    </div>
                    <div class="scroll-controls">
                        <div class="scroll-btn scroll-left" data-target="community-pages">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="scroll-btn scroll-right" data-target="community-pages">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
                <div class="pages-scroll" id="community-pages">
                    <!-- 伴侣绑定 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>伴侣绑定 (Partner Binding)</span>
                            <span class="text-xs">partner_binding.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="partner_binding.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('home.html', this)">首页</button>
                            <button class="nav-button active" onclick="navigateTo('partner_binding.html', this)">
                                伴侣绑定
                            </button>
                            <button class="nav-button" onclick="navigateTo('partner_sharing.html', this)">
                                共享设置
                            </button>
                        </div>
                    </div>

                    <!-- 伴侣共享 -->
                    <div class="page-container">
                        <div class="page-header">
                            <span>伴侣共享 (Partner Sharing)</span>
                            <span class="text-xs">partner_sharing.html</span>
                        </div>
                        <div class="device-container">
                            <div class="device-notch"></div>
                            <iframe src="partner_sharing.html" class="device-iframe"></iframe>
                        </div>
                        <div class="nav-buttons">
                            <button class="nav-button" onclick="navigateTo('partner_binding.html', this)">
                                伴侣绑定
                            </button>
                            <button class="nav-button active" onclick="navigateTo('partner_sharing.html', this)">
                                伴侣共享
                            </button>
                            <button class="nav-button" onclick="navigateTo('home.html', this)">首页</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            // 导航函数
            function navigateTo(page, button) {
                const container = button.closest('.page-container');
                const iframe = container.querySelector('iframe');
                const buttons = container.querySelectorAll('.nav-button');

                // 更新iframe源
                iframe.src = page;

                // 更新按钮状态
                buttons.forEach((btn) => btn.classList.remove('active'));
                button.classList.add('active');
            }

            // 初始化空白页面处理
            document.addEventListener('DOMContentLoaded', function () {
                const iframes = document.querySelectorAll('iframe');
                iframes.forEach((iframe) => {
                    iframe.onerror = function () {
                        this.srcdoc = `
                        <html>
                        <body style="display:flex;justify-content:center;align-items:center;height:100%;margin:0;background:#f5f5f5;font-family:sans-serif;">
                            <div style="text-align:center;color:#666;">
                                <div style="font-size:40px;margin-bottom:10px;">🚧</div>
                                <div style="font-weight:bold;">页面开发中</div>
                                <div style="font-size:12px;margin-top:5px;">此页面尚未实现</div>
                            </div>
                        </body>
                        </html>
                    `;
                    };
                });

                // 分类标签点击事件
                const categoryTags = document.querySelectorAll('.category-tag');
                categoryTags.forEach((tag) => {
                    tag.addEventListener('click', () => {
                        // 移除其他标签的激活状态
                        categoryTags.forEach((t) => t.classList.remove('active'));
                        // 激活当前标签
                        tag.classList.add('active');

                        const category = tag.getAttribute('data-category');

                        // 控制分类区域显示隐藏
                        if (category === 'all') {
                            // 显示所有分类
                            document.querySelectorAll('.category-section').forEach((section) => {
                                section.style.display = 'block';
                            });
                        } else {
                            // 隐藏所有分类，只显示当前分类
                            document.querySelectorAll('.category-section').forEach((section) => {
                                section.style.display = 'none';
                            });
                            document.getElementById(`${category}-section`).style.display = 'block';
                        }
                    });
                });

                // 滚动控制按钮事件
                const scrollBtns = document.querySelectorAll('.scroll-btn');
                scrollBtns.forEach((btn) => {
                    btn.addEventListener('click', () => {
                        const targetId = btn.getAttribute('data-target');
                        const container = document.getElementById(targetId);
                        const scrollAmount = 450; // 大致一个页面容器的宽度

                        if (btn.classList.contains('scroll-left')) {
                            container.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
                        } else {
                            container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
                        }
                    });
                });

                // 初始显示所有分类
                document.querySelectorAll('.category-section').forEach((section) => {
                    section.style.display = 'block';
                });
            });
        </script>
    </body>
</html>
